<!-- Logo starts -->
    <a href="#" class="logo">
        <img src="assets/lib/img/logo.png" alt="logo">
    </a>
    <!-- Logo ends -->

    <!-- Menu start -->
    <div id='menu'>
        <ul>
            <li class='highlight'>
                <a href='index.html'>
                    <div class="fs1" aria-hidden="true" data-icon="&#xe007;"></div>
                    <span>Dashboard</span>
                </a>
            </li>
            <li>
                <a href='graphs.html'>
                    <div class="fs1" aria-hidden="true" data-icon="&#xe0f8;"></div>
                    <span>Graphs</span>
                </a>
            </li>
            <li class='has-sub'>
                <a href='#'>
                    <div class="fs1" aria-hidden="true" data-icon="&#xe052;"></div>
                    <span>Ui Elements</span>
                </a>
                <ul>
                    <li>
                        <a href='panels.html'>
                            <span>Panel &amp; List Groups</span>
                        </a>
                    </li>
                    <li>
                        <a href='buttons.html'>
                            <span>Buttons</span>
                        </a>
                    </li>
                    <li>
                        <a href='grid.html'>
                            <span>Grid</span>
                        </a>
                    </li>
                    <li>
                        <a href='ui-elements.html'>
                            <span>More</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li class='has-sub'>
                <a href='#'>
                    <div class="fs1" aria-hidden="true" data-icon="&#xe0ab;"></div>
                    <span>Forms</span>
                </a>
                <ul>
                    <li>
                        <a href='form.html'>
                            <span>Form Elements</span>
                        </a>
                    </li>
                    <li>
                        <a href='form-wizard.html'>
                            <span>Form Wizards</span>
                        </a>
                    </li>
                    <li>
                        <a href="editor.html">
                            <span>Wysihtml Editor</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li>
                <a href='gallery.html'>
                    <div class="fs1" aria-hidden="true" data-icon="&#xe0e6;"></div>
                    <span>Gallery</span>
                </a>
            </li>
            <li>
                <a href="tables.html">
                    <div class="fs1" aria-hidden="true" data-icon="&#xe0f2;"></div>
                    <span>Tables</span>
                </a>
            </li>
            <li class='has-sub'>
                <a href='#'>
                    <div class="fs1" aria-hidden="true" data-icon="&#xe0a0;"></div>
                    <span>Bonus Pages</span>
                </a>
                <ul>
                    <li>
                        <a href='invoice.html'>
                            <span>Invoice</span>
                        </a>
                    </li>
                    <li>
                        <a href='calendar.html'>
                            <span>Calendar</span>
                        </a>
                    </li>
                    <li>
                        <a href='login.html'>
                            <span>Login</span>
                        </a>
                    </li>
                    <li>
                        <a href='404.html'>
                            <span>404</span>
                        </a>
                    </li>
                    <li>
                        <a href='default.html'>
                            <span>Default</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li>
                <a href='maps.html'>
                    <div class="fs1" aria-hidden="true" data-icon="&#xe089;"></div>
                    <span>Vector Maps</span>
                </a>
            </li>
            <li>
                <a href='notifications.html'>
                    <div class="fs1" aria-hidden="true" data-icon="&#xe0e9;"></div>
                    <span>Notifications</span>
                </a>
            </li>
            <li>
                <a href='typography.html'>
                    <div class="fs1" aria-hidden="true" data-icon="&#xe019;"></div>
                    <span>Typography</span>
                </a>
            </li>
        </ul>
    </div>
    <!-- Menu End -->

    <!-- Extras starts -->
    <div class="extras">
        <div class="ex-wrapper">
            <div class="alert alert-info">
                <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
            </div>
        </div>
    </div>
    <!-- Extras ends -->